<template>
  <div
    class="img-preview-container"
    :style="{ width: '100%', height: height, 'overflow': 'hidden' }"
  >
    <div
      class="img-container"
      :style="{
        'min-width': width,
        'min-height': height,
        margin: '0px auto',
        transform: 'scale(' + multiples + ')',
        transformOrigin: 'center center',
      }"
    >
      <img
        v-drag
        :src="currentimg"
        alt=""
        srcset=""
        :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
      >

    </div>
    <div class="btn-container">
      <div class="left-right">
        <div class="left">
          <span
            class="handle-btn"
            @click="magnify"
          ><i class="el-icon-zoom-in" /></span>
          <span
            class="handle-btn"
            @click="shrink"
          ><i class="el-icon-zoom-out" /></span>
          <span
            class="handle-btn"
            @click="rotate"
          ><i class="el-icon-refresh-left" /></span>
          <span
            class="handle-btn"
            @click="rotate"
          ><i class="el-icon-refresh-right" /></span>
        </div>
        <slot name="right" />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
// // 自定义指令--拖拽
Vue.directive('drag', function(el, binding) {
  const oDiv = el // 当前元素
  oDiv.onmousedown = function(e) {
    e.preventDefault()
    const bw = document.body.clientWidth
    const bh = document.body.clientHeight
    // 鼠标按下，计算当前元素距离可视区的距离
    const disX = e.clientX - oDiv.offsetLeft
    const disY = e.clientY - oDiv.offsetTop
    // 计算两边坐标
    document.onmousemove = function(e) {
      let l = 0
      let t = 0
      // 拖动边界
      if (e.clientX >= bw) {
        l = bw - disX
      } else if (e.clientX <= 0) {
        l = 0 - disX
      } else {
        l = e.clientX - disX
      }
      if (e.clientY >= bh) {
        t = bh - disY
      } else if (e.clientY <= 0) {
        t = 0 - disY
      } else {
        t = e.clientY - disY
      }
      // 移动当前元素
      oDiv.style.left = l + 'px'
      oDiv.style.top = t + 'px'
    }
    // 鼠标停止移动时，事件移除
    document.onmouseup = function(e) {
      document.onmousemove = null
      document.onmouseup = null
    }
  }
})
export default {
  name: 'ImgPreview',
  props: {
    currentimg: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '650px'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      deg: 0,
      multiples: 1
    }
  },
  methods: {
    // 放大
    magnify() {
      if (this.multiples >= 3) {
        return
      }
      this.multiples += 0.25
    },
    // 缩小
    shrink() {
      if (this.multiples <= 0.5) {
        return
      }
      this.multiples -= 0.25
    },
    // 旋转
    rotate() {
      this.deg += 90
      if (this.deg >= 360) {
        this.deg = 0
      }
    },
    closePreview() {
      this.$emit('close-preview')
    }
  }
}
</script>
<style scoped>
.img-preview-container{
    position: relative;
}
.img-container {
  max-width: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}
.img-container img {
  width: 100%;
  position: absolute;
}
.btn-container {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  margin-top: 20px;
}
.btn-container .left-right {
    padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.handle-btn {
  display: inline-block;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 32px;
  background: rgba(0, 0, 0, 0.2);
  margin-right: 10px;
  border-radius: 4px;
}
.handle-btn:hover {
  cursor: pointer;
}
.handle-btn i {
  font-size: 18px;
  color: #fff;
}
</style>
